<script setup>
import {ref, watch} from 'vue'
import {useRouter, useRoute} from 'vue-router'
import goBackIcon from '/img/goback.png' // 引入返回图标
const keyword = ref('')
const router = useRouter()
const route = useRoute()

// 初始化 keyword
if (route.query.keyword) {
  keyword.value = route.query.keyword
}

// 监听路由变化，保持 keyword 与 query 同步
watch(
    () => route.query.keyword,
    (val) => {
      if (val !== undefined) keyword.value = val
      // onFocus() // 这里没有onFocus定义，去掉
    }
)

function onClear() {
  keyword.value = ''
}

async function goBack() {
  if (route.name === 'searchList') {
    keyword.value = '';
  }
  await router.push({
    path: '/',
    query: {
      id: localStorage.getItem('currentRoomDoorNum')
    }
  })



}

// 新增：回车或点击搜索时跳转到searchList
function onSearch() {
  if (route.name !== 'searchList') {
    router.push({name: 'searchList', query: {keyword: keyword.value}})
  } else {
    router.replace({name: 'searchList', query: {keyword: keyword.value}})
  }
}

// 新增：聚焦时自动跳转到searchList
function onFocus() {
  if (route.name !== 'searchList') {
    router.push({name: 'searchList', query: {keyword: keyword.value}})
  }
}
</script>

<template>
  <div class="search-page">
    <div class="search-bar-wrap">
      <div class="back-btn" @click="goBack" role="button" tabindex="0" aria-label="返回">
        <img :src="goBackIcon" alt="返回" class="back-icon" />
      </div>
      <van-search
          v-model="keyword"
          placeholder="前往目的地"
          shape="round"
          class="custom-search"
          @clear="onClear"
          :show-action="false"
          @search="onSearch"
          @submit.prevent="onSearch"
          @click="onFocus"
      />
    </div>
    <!-- 通过 v-slot 传递 keyword 给子组件 -->
    <router-view :keyword="keyword"/>
  </div>
</template>

<style scoped>
.search-bar-wrap {
  display: flex;
  align-items: center;
  padding: 10px 10px 0 10px;
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 10;
}

.back-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 3px;
  cursor: pointer;
  outline: none;
  border: none;
  margin-left: 8px;

  /* 确保在所有设备上都显示为圆形 */
  flex-shrink: 0;
  box-sizing: border-box;

  /* 添加焦点和交互状态 */
  transition: background-color 0.2s ease;
}

.back-btn:focus,
.back-btn:active {
  outline: none;
  background-color: #f5f5f5;
}

/* 确保可访问性 */
.back-btn[role="button"] {
  -webkit-tap-highlight-color: transparent;
}

.back-btn[role="button"]:focus {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12), 0 0 0 2px rgba(66, 133, 244, 0.5);
}

/* 只让输入框部分为灰色圆角 */
.custom-search {
  flex: 1;
}

::v-deep(.custom-search .van-search__content) {
  background: #f5f5f5 !important;
  border-radius: 24px !important;
  border: none !important;
  height: 40px !important;
  min-height: 40px !important;
  display: flex;
  align-items: center;
  padding: 0 !important;
  box-sizing: border-box;
}

::v-deep(.custom-search .van-field__control) {
  height: 28px !important;
  font-size: 16px !important;
  line-height: 28px !important;
}

::v-deep(.custom-search .van-icon-search) {
  font-size: 22px !important;
  margin-left: 14px !important;
  margin-right: 8px !important;
  align-self: center !important;
}

.back-icon {
  width: 30px;
  height: 30px;
  display: block;
}
</style>